<template>
	<view class="content">
		<!-- 首页 -->
		<view :style="{ display: show_index == 0 ? 'block' : 'none' }"><tab-home ref="home"></tab-home></view>
		<!-- 发布 -->
		<view :style="{ display: show_index == 1 ? 'block' : 'none' }"><tab-publish ref="publish"></tab-publish></view>
		<!-- 我的 -->
		<view :style="{ display: show_index == 2 ? 'block' : 'none' }"><tab-mine ref="mine"></tab-mine></view>

		<!-- is_lhp判断是否为刘海屏在main.js里，好像uniapp有一个css变量获取刘海屏的安全区域 -->
		<view class="tabBar" :style="{ height: is_lhp ? '140rpx' : '98rpx' }">
			<!-- 导航的中间圆圈 -->
			<view class="border_box" :style="{ paddingBottom: is_lhp ? '40rpx' : '' }"><view class="tabBar_miden_border"></view></view>
			<view class="tabBar_list" :style="{ paddingBottom: is_lhp ? '40rpx' : '' }">
				<view v-for="item in tab_nav_list" :key="item.id" :class="{ tabBar_item: item.id != 1, tabBar_item1: item.id == 1 }" @tap="cut_index(item.id)">
					<image v-if="show_index == item.id" :src="`../../static/tabBar/${item.id + 1}${item.id + 1}.png`"></image>
					<image v-else :src="`../../static/tabBar/${item.id + 1}.png`"></image>
					<view :class="{ tabBar_name: true, nav_active: show_index == item.id }">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import tabHome from '@/components/home.vue';
import tabPublish from '@/components/publish.vue';
import tabMine from '@/components/mine.vue';

export default {
	components: {
		tabHome,
		tabPublish,
		tabMine
	},
	data() {
		return {
			show_index: 0, //控制显示那个组件
			tab_nav_list: [{ id: 0, name: '首页' }, { id: 1, name: '发布' }, { id: 2, name: '我的' }], //菜单列表
			is_lhp: false
		};
	},
	onLoad() {
		let _this = this;
		this.is_lhp = this.$is_bang;
		this.$nextTick(function() {
			// 一定要等视图更新完再调用方法   -----------++++++++++++++++重要
			setTimeout(function() {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#6739b6'
				});
				_this.$refs.home.ontrueGetList(); //初次加载第一个页面的请求数据
			}, 100);
		});
		console.log('是否为刘海屏', this.is_lhp);
	},
	methods: {
		// 切换组件
		cut_index(type) {
			console.log('----------------------------------', type);
			let _this = this;
			_this.show_index = type;
			if (_this.show_index == 0) {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#6739b6'
				});
				_this.$refs.home.ontrueGetList();
			} else if (_this.show_index == 1) {
				_this.$refs.publish.ontrueGetList();
			} else if (_this.show_index == 2) {
				_this.$refs.mine.ontrueGetList();
			}
		}
	}
};
</script>

<style lang="scss">
page {
	color: #1a1a1a;
	font-size: 24rpx;
}

.banner {
	width: 100%;
	height: 268rpx;
	margin: 30rpx auto 44rpx;
	.swiper {
		height: 268rpx;
	}
	.item {
		position: relative;
		display: block;
		width: 686rpx;
		height: 268rpx;
		margin: 0 auto;
		border-radius: 14rpx;
		overflow: hidden;
	}
	.img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.tag {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 34rpx;
		padding: 0 14rpx;
		line-height: 34rpx;
		color: #fff;
		background: #43a5f0;
		z-index: 10;
		border-top-left-radius: 14rpx;
	}
}

.main-bar {
	padding-bottom: 22rpx;
	text-align: center;
	line-height: 70rpx;
	color: #666;
	border-bottom: 1rpx solid #e6e6e6;
	.img {
		display: block;
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}
	.flex-item {
		position: relative;
		.date {
			position: absolute;
			left: 60rpx;
			top: 40rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #ff392d;
			transform: scale(0.8);
		}
	}
}

.song-list {
	padding-left: 32rpx;
	.tit-bar {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}

	.more {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 32rpx;
		color: #333;
		font-weight: 400;
		font-size: 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50rpx;
	}
	.switch-line {
		justify-content: space-between;
		color: #999;
		.flex-box {
			line-height: 110rpx;
			width: 300rpx;
		}
		.switch-item {
			font-weight: 600;
			&:first-child {
				width: 80rpx;
			}
			&:last-child {
				padding-left: 22rpx;
			}
			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}

	.item {
		position: relative;
		display: inline-block;
		width: 218rpx;
		padding-bottom: 16rpx;
		margin-right: 16rpx;
		line-height: 34rpx;
		&:before {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 40rpx;
			z-index: 2;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
		}
		&.video {
			width: 450rpx;
		}
		.img {
			display: block;
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}
	.count {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 25rpx;
		line-height: 34rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 10;
		background: url()
			no-repeat;
		background-size: 25rpx 25rpx;
		transform: scale(0.8);
	}
}
.video-list {
	padding-left: 0;
	.tit-bar {
		padding-left: 32rpx;
	}
	.video-item {
		width: 686rpx;
		height: 490rpx;
		margin: 0 auto;
		background: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
	}
	.img {
		display: block;
		width: 686rpx;
		height: 390rpx;
		background: #eee;
	}
	.desc {
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 100rpx;
	}
}
.tabBar {
	width: 100%;
	height: 98rpx;
	background: #fff;
	border-top: 1px solid #e5e5e5;
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	.tabBar_list {
		width: 86%;
		display: flex;
		justify-content: space-between;
		image {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 2rpx;
		}
		.tabBar_item {
			width: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 20rpx;
			color: #969ba3;
		}
		.tabBar_item1 {
			width: 68rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 20rpx;
			color: #969ba3;
			margin-top: -20rpx;
			position: relative;
			z-index: 101;
			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
}
.border_box {
	// pointer-events: none; 事件穿透解决z-index层级问题
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0px;
	bottom: 50rpx;
	z-index: 100;
	pointer-events: none;
	.tabBar_miden_border {
		width: 100rpx;
		height: 50rpx;
		border-top: 2rpx solid #e5e5e5;
		border-radius: 50rpx 50rpx 0 0; /* 左上、右上、右下、左下 */
		background: #fff;
	}
}
.nav_active {
	color: #007aff;
}
/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
/* #ifdef MP-WEIXIN */
.banner {
	margin-top: 60rpx;
}
/* #endif */
</style>
